<template>
  <div class="info-container">
    <h3>报销详情</h3>

    <!-- 状态提示区域 -->
    <div v-if="showStatusMessage" class="status-message">
      <el-alert
        :title="statusMessage.title"
        :description="statusMessage.description"
        :type="statusMessage.type"
        :closable="false"
        show-icon
      />
    </div>

    <div class="info-grid">
      <div><strong>申请人:</strong> {{ application.applicantName }}</div>
      <div><strong>申请ID:</strong> {{ application.id }}</div>
      <div>
        <strong>报销金额:</strong> <span class="amount">¥ {{ application.amount.toFixed(2) }}</span>
      </div>
      <div><strong>费用类型:</strong> {{ expenseTypeLabel }}</div>
      <div>
        <strong>当前状态:</strong>
        <span :class="`status-${application.status.toLowerCase()}`">{{ statusText }}</span>
      </div>
      <div><strong>申请时间:</strong> {{ formatDate(application.createdAt) }}</div>
      <div class="description"><strong>报销事由:</strong> {{ application.description }}</div>
      <div v-if="application.invoiceInfo" class="invoice-info">
        <strong>发票信息:</strong> {{ application.invoiceInfo }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { ReimbursementApplication } from '@/services/models'
import { STATUS_LABELS, EXPENSE_TYPE_LABELS } from '@/services/models'
import { useApplicationStore } from '@/store/application' // 引入Pinia store

const props = defineProps<{ application: ReimbursementApplication }>()
const store = useApplicationStore() // 获取store实例

// 当前用户是否为申请人
const isApplicant = computed(() => store.currentUser.id === props.application.applicantId)

// 状态文本映射
const statusText = computed(() => STATUS_LABELS[props.application.status] || '未知状态')

// 费用类型标签
const expenseTypeLabel = computed(
  () => EXPENSE_TYPE_LABELS[props.application.expenseType] || '未知类型',
)

// 格式化日期
const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  })
}

// 状态消息配置
const statusMessage = computed(() => {
  switch (props.application.status) {
    case 'PENDING_HEAD_REVIEW':
      return {
        title: '申请已提交',
        description: '您的申请已提交，正在等待部门主管审批。',
        type: 'info' as const,
      }
    case 'PENDING_FINANCE_REVIEW':
      return {
        title: '申请已进入下一级审批流程',
        description: '部门主管已审批通过，申请已进入财务审核阶段。',
        type: 'success' as const,
      }
    case 'PENDING_GM_REVIEW':
      return {
        title: '申请已进入下一级审批流程',
        description: '财务审核已通过，申请已进入总经理终审阶段。',
        type: 'success' as const,
      }
    case 'COMPLETED':
      return {
        title: '申请已完成',
        description: '总经理已审批通过，申请已完成，将自动完成打款流程。',
        type: 'success' as const,
      }
    case 'REJECTED':
      return {
        title: '申请已被驳回',
        description: '您的申请已被驳回，请查看驳回原因并修改后重新提交。',
        type: 'warning' as const,
      }
    case 'CANCELLED':
      return {
        title: '申请已撤销',
        description: '您的申请已被撤销，如需报销请重新提交申请。',
        type: 'info' as const,
      }
    default:
      return null
  }
})

// 只有申请人自己才显示状态提示
const showStatusMessage = computed(() => isApplicant.value && statusMessage.value !== null)
</script>

<style scoped>
.info-container {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 15px;
}

.description,
.invoice-info {
  grid-column: 1 / -1;
}

.amount {
  color: #e67e22;
  font-weight: bold;
  font-size: 1.1em;
}

.status-pending_head_review,
.status-pending_finance_review,
.status-pending_gm_review {
  color: #f39c12;
  font-weight: bold;
}

.status-completed {
  color: #2ecc71;
  font-weight: bold;
}

.status-rejected {
  color: #e74c3c;
  font-weight: bold;
}

.invoice-info {
  background: #f8f9fa;
  padding: 10px;
  border-radius: 4px;
  border-left: 3px solid #3498db;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
  }

  .info-container {
    padding: 15px;
  }
}

.status-message {
  margin-bottom: 20px;
}

.status-message .el-alert {
  border-radius: 8px;
  border: none;
}

.status-message .el-alert--info {
  background-color: #f0f9ff;
  border: 1px solid #bae6fd;
}

.status-message .el-alert--success {
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.status-message .el-alert--warning {
  background-color: #fffbeb;
  border: 1px solid #fed7aa;
}
</style>
